<template>
  <div class="flex items-center box-border">
    <div v-if="isLogin" class="mr-20px flex items-center">
      <el-dropdown
        trigger="hover"
        popper-class="notice-dropdown"
        @command="orderCommand"
      >
        <span class="mr-40px text-default">
          支持
          <el-icon color="#8A8C8F" :size="12">
            <caret-bottom />
          </el-icon>
        </span>

        <template #dropdown>
          <el-dropdown-item command="create">
            <span>创建工单</span>
          </el-dropdown-item>
          <el-dropdown-item command="my">
            <span>我的工单</span>
          </el-dropdown-item>
        </template>
      </el-dropdown>
      <el-dropdown
        trigger="hover"
        @command="noticePush"
        popper-class="notice-dropdown"
      >
        <el-badge
          :value="totalUnreadNum"
          :hidden="!totalUnreadNum"
          class="cursor-pointer h-20px mr-32px"
        >
          <el-icon color="#767676" :size="20">
            <Bell />
          </el-icon>
        </el-badge>
        <template #dropdown>
          <el-dropdown-item command="1">
            <span>通知</span>
            <span
              v-show="userStore.unreadNum?.notice"
              class="ml-40px w-20px h-20px b-rd-10px bg-main lh-20px text-center text-white font-size-12px"
              >{{ userStore.unreadNum?.notice }}</span
            >
          </el-dropdown-item>
          <el-dropdown-item command="2">
            <span>公告</span>
            <span
              v-show="userStore.unreadNum?.inform"
              class="ml-40px w-20px h-20px b-rd-10px bg-main lh-20px text-center text-white font-size-12px"
              >{{ userStore.unreadNum?.inform }}</span
            >
          </el-dropdown-item>
        </template>
      </el-dropdown>

      <a
        v-if="showManageBtn"
        :href="manageUrl"
        target="_blank"
        class="cursor-pointer font-size-14px mr-16px"
        ><el-button type="text" size="small" class="text-default"
          >工作台</el-button
        ></a
      >
      <el-dropdown @command="handleCommand">
        <span class="inline-flex items-center">
          <el-avatar :src="userStore.userAvatar"></el-avatar>
          <el-icon color="#8A8C8F" :size="12" style="margin-left: 5px">
            <caret-bottom />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-item command="center">个人中心</el-dropdown-item>
          <el-dropdown-item v-if="isSupplyUser" command="company"
            >公司信息</el-dropdown-item
          >
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </template>
      </el-dropdown>
    </div>
    <div
      v-else
      class="login-btn cursor-pointer w-112px lh-60px text-center"
      @click="goLogin"
    >
      登录/注册
    </div>
  </div>
</template>

<script setup>
import { CaretBottom, Bell } from "@element-plus/icons-vue";
import { USER_TYPE_VALUE_ENUM } from "@/const";
import { useUserStore } from "@/store";
import { getToken } from "@/utils/auth";

const manageUrl = `${import.meta.env.VITE_MANAGE_URL}?t=${getToken()}`;
const userStore = useUserStore();
const isLogin = computed(() => !!userStore.userInfo);
const isSupplyUser = computed(
  () =>
    [
      USER_TYPE_VALUE_ENUM.SUPPLY_MANAGER,
      USER_TYPE_VALUE_ENUM.SUPPLY_SUB_MANAGER,
    ].includes(userStore.userInfo?.userType) &&
    userStore.userInfo.companyStatus === 1
);
const showManageBtn = computed(() => userStore.userInfo.userType === 0);

const totalUnreadNum = computed(
  () => userStore.unreadNum.inform + userStore.unreadNum.notice
);

const router = useRouter();
const route = useRoute();
const goLogin = () => {
  router.push({
    name: "Login",
    query: {
      redirect: route.fullPath,
    },
    replace: true,
  });
};

const noticePush = (command) => {
  router.push({
    path: "/notice",
    query: {
      type: command,
    },
  });
};

const handleCommand = (command) => {
  switch (command) {
    case "center":
      router.push({
        name: "UserCenter",
      });
      break;
    case "company":
      router.push({
        name: "CompanyCenter",
      });
      break;
    case "logout":
      userStore.logout();
      ElMessage.success("退出登录成功");
      router.push({
        path: "/",
        replace: true,
      });
      break;
  }
};

const orderCommand = (command) => {
  router.push({
    path: `/order/${command}`,
  });
};
</script>

<style lang="less" scoped>
:deep(.el-avatar) {
  --el-avatar-size: 30px !important;
}
.login-btn {
  color: #fff;
  background: @main-color;
  transition: opacity 0.1s linear;
  &:hover {
    opacity: 0.8;
  }
}
</style>
